<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.js"></script>
    <style>
        * {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        @font-face{
            font-family: QS-R;
            src:url(/font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(/font/Quicksand-Medium.ttf);
        }
        .nav .nav-content {
            width: 700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .nav .nav-content h1{
            font-family: QS-R;
            text-align:right;
        }
        .nav .wel-content div {
            font-size: 32px;
            font-family: QS-R;
            font-weight: 900;
            text-align: right;
        }
    </style>
    <style>
        .split-line {
            width:700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .dot {
            font-size:0;
            border-radius: 50%;
            border: 5px solid black;

        }
    </style>
    <style>
        .clearfix::after {
            content:"";
            display: block;
            height:0;
            clear: both;
        }

        .main {
            width:700px;
            margin: 50px auto 0;
            padding: 0px 60px;
        }
        .main .content {
            float:left;
            font-family: QS-R;
            font-size:20px;
            font-weight:bold;
        }
        .main .left-content {
            margin-left: 88px;
        }

        .main .left-content .type-container {
            width:160px
        }

        .main .left-content .type-container .type-title {
            border:6px solid #1758E9
        }

        .main .left-content .type-container .type-list {
            border:6px solid #1758E9;
            border-top:1px solid #1758E9;
        }

        .main .left-content .type-container .type-list .type-item {
            margin:10px 0
        }

        .main .left-content .type-container .type-title span {
            margin: 0 8px;
            color: #1b6d85;
            top:5px
        }

        .main .right-content {
            margin-left: 25px;
        }

        .main .right-content .topic-container .topic-title span {
            margin: 0 8px;
            color: #1b6d85;
            top:5px
        }
        .main .right-content .topic-container {
            width:350px
        }
        .main .right-content .topic-container .topic-title {
            border:6px solid #1758E9
        }
        .main .right-content .topic-container .topic-list,.add-topic {
            border:6px solid #1758E9;
            border-top:1px solid #1758E9;
            text-align: center;

        }
        .main .right-content .topic-container .add-topic{
            color:mediumblue;
        }
        .main .right-content .topic-container .back {
            width:170px;
            font-family: QS-R;
            font-size: 16px;
            text-align: center;
            background-color:mediumblue;
            color:white;
            border-radius: 5px;
            margin-left: 180px;
            margin-top: 86px;
        }



    </style>

</head>
<body>
<div class="create-topic-name" style="display: none">
<!--    <div class="create-topic-bar">-->
<!--        <input type="hidden" id="uniId" th:value="${uniId}">-->
<!--        <input type="hidden" id="courseId" th:value="${courseId}">-->
<!--        <input type="hidden" id="courseGroup" th:value="${courseGroup}">-->
<!--        <input type="text" id="topicName" name="login-username" class="input-name text"><br/>-->
<!--        <input type="button" id="submit" class="button back" Value="Submit">-->
<!--    </div>-->

</div>
<div class="nav">
    <div class="nav-content">
        <div class="logo"><img src="/image/LOGO.png"  style="width:222px;height:114px;"></div>
        <div class="wel-content">
            <div>Welcome!</div>
            <div th:text="|${courseId} G${courseGroup}|">SSK3313 G4</div>
        </div>
    </div>
</div>
<div class="split-line">
    <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
        class="dot"></span><span class="dot"></span>
</div>
<style>
    .main-title {
        text-align: center;
        font-family: QS-B;
    }
    .table-title{
        display: flex;
        font-family: QS-M;
        font-weight: bold;
        font-size: 28px;
        justify-content: space-between;
        margin-bottom: 25px;
    }
    .table-item{
        display: flex;
        justify-content: space-between;
        font-family: QS-M;

        font-size: 20px;
    }
    .table-item .table-list-item {
        width: 100px;
    }
    .button {
        width:126px;
        height:30px;
        color:white;
        background-color:#004aad;
        border:none;
        border-radius:8px;
        font-family:QS-M;
        font-size: 20px;
    }
</style>

<div class="main">
    <div class="main-title">
        <h1>Participants</h1>
    </div>
    <div class="table-title">
        <div class="table-title-item">Name</div>
        <div class="table-title-item" style="margin-right: 33px;">Role</div>
        <div class="table-title-item">ID</div>
    </div>
    <div class="table-list">
        <div class="table-item" th:each="user:${users}">
            <div class="table-list-item" th:text="|${user.fName} ${user.lName}|">Jim Kim</div>
            <div class="table-list-item" style="text-align: center" th:text="${user.role}=='eductor'?'educator':'learner'">Leaner</div>
            <div class="table-list-item" style="text-align: right" th:text="${user.userId}">123456</div>
        </div>
    </div>

    <div class="btn" style="margin-left: 416px;margin-top: 30px;">
        <input onclick="document.location='/courseInfo/UPM/SK55555'" type="button" class="button back" Value="Back">
    </div>
</div>

</body>
</html>